<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!--头部信息-->
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--title keywords description 请改为自己的-->
<title>{{role_nav.sitename}}</title>
<meta name="description" content="{{role_nav.siteIcon}}"/>
<!--网站favicon可以没有或者改为自己的-->
<link rel="shortcut icon" type="image/x-icon" href="{{site.icon}}"/>

<!--CSS 若不需要变动样式不用改-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/css/zui.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
ul{padding:0}li{list-style:none}a:hover,a:active,a:focus{text-decoration:none}
body {
    background-image: url();
    background-repeat:repeat;
    background-attachment:fixed;
    overflow-x: hidden;
    overflow-y: auto;
}
i.icon,i.fa{margin-right:6px}.col,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{padding:0 5px}header{position:fixed;top:0;left:0;width:100%;z-index:100;height:50px;background:#FFF}header .logo{font-size:20px;height:50px;margin:0;font-weight:400;position:relative;z-index:99;border-bottom:1px solid #e8e8e8;background:#FFF;text-align:center}header .main{position:relative}header .nav{width:100%;margin-left:25px;background:#FFF;margin:0;overflow:hidden;transition:all .4s ease;-moz-transition:all .4s ease;-webkit-transition:all .4s ease;-o-transition:all .4s ease;position:absolute;top:-300px;left:0}header .showNav{top:50px;box-shadow:0 5px 5px rgba(204,204,204,.15);-moz-box-shadow:0 5px 5px rgba(204,204,204,.15)}header .nav li{font-size:16px}header .nav a{display:block;line-height:40px;font-size:16px;color:#959595;padding:0 25px;border-bottom:1px solid #f5f5f5}header .nav a:hover{border-color:#459df5;color:#459df5}header .head-btn{float:right;line-height:60px}header .head-btn a{margin-left:5px;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;background:#f5f5f5;color:#03b8cf;border:1px solid #e5e5e5;transition:all .2s;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s}header .head-btn a:hover{background:#03b8cf;color:#FFF;border:1px solid #03b8cf}header .head-btn a>i{margin-right:0;font-size:15px}header .nav-btn{position:fixed;border:0;background:transparent;top:0;left:10px;outline:0;margin-top:10px;z-index:100}header .nav-btn{left:inherit;right:10px}header .nav-btn .icon-line{display:block;margin:6px 0;width:25px;height:2px;background:#999;cursor:pointer;transition:all .4s ease;-moz-transition:all .4s ease;-webkit-transition:all .4s ease;-o-transition:all .4s ease}header .nav-btn .middle{margin:0 auto}header .animated2 .top{transform:translateY(8px) rotateZ(45deg);-ms-transform:translateY(8px) rotateZ(45deg);-moz-transform:translateY(8px) rotateZ(45deg);-webkit-transform:translateY(8px) rotateZ(45deg);-o-transform:translateY(8px) rotateZ(45deg)}header .animated2 .middle{width:0}header .animated2 .bottom{transform:translateY(-8px) rotateZ(-45deg);-ms-transform:translateY(-8px) rotateZ(-45deg);-moz-transform:translateY(-8px) rotateZ(-45deg);-webkit-transform:translateY(-8px) rotateZ(-45deg);-o-transform:translateY(-8px) rotateZ(-45deg)}.left-bar{position:fixed;top:50px;left:-240px;width:200px;max-width:100%;height:100%;background:#353535;z-index:12;transition:all .4s ease;-moz-transition:all .4s ease;-webkit-transition:all .4s ease;-o-transition:all .4s ease;transform:translateZ(0);-ms-transform:translateZ(0);-moz-transform:translateZ(0);-webkit-transform:translateZ(0);-o-transform:translateZ(0)}.left-bar .header{padding:0 15px;border-bottom:1px solid #464646}.left-bar .header h2{font-size:17px;line-height:40px;max-width:100%;overflow:hidden;margin:0;font-weight:400;display:block;color:#ccc}.left-bar .menu{height:450px;margin-bottom:15px;border-bottom:1px solid #424242}.left-bar .menu ul li a{display:block;height:35px;line-height:35px;font-size:14px;color:#777;padding-left:38px}.scrollcontent{width:100%;top:0;left:0;padding-right:4px;padding-top:5px}.left-bar .menu ul li a:hover{background:#f5f5f5}.left-bar .menu ul li i.fa{width:15px;text-align:center;margin-right:20px}.left-bar .tree li.open>ul::-webkit-scrollbar{width:3px;margin-right:2px}.menu-about p{font-size:12px;color:#ccc;text-align:center}#content{position:absolute;left:0;right:0;top:0;bottom:0}#content>.Off-left-menu{display:none}#content>div.center-main{margin:0 auto}.sousuo{padding:35px 0}.search{position:relative;width:100%;margin:0 auto}.search-box{height:50px;border-radius:10px;overflow:hidden;display:-webkit-flex;display:flex;flex-wrap:wrap;border:1px solid #e6e6e6}.search-engine-name{width:69px;height:50px;background:#16c0f8;border:0;color:#fff;font-weight:bold;outline:0}.search-input{box-sizing:border-box;flex:1;height:50px;line-height:50px;font-size:16px;color:#999;border:0;outline:0;padding-left:6px}input::-webkit-input-placeholder{font-size:12px;letter-spacing:1px;color:#ccc}.search-btn{width:80px;height:50px;background:#16c0f8;border:0;color:#fff;font-weight:bold;outline:0}.search-engine{position:absolute;top:60px;left:0;width:100%;background:#FFF;padding:15px 0 0 15px;border-radius:5px;box-shadow:0 5px 20px 0 #d8d7d7;transition:all .3s;display:none;z-index:999}.search-engine-head{overflow:hidden;margin-bottom:10px;padding-right:15px}.search-engine-tit{float:left;margin:0;font-size:14px;color:#999}.search-engine ul::before{content:'';width:0;height:0;position:absolute;top:-15px;border-top:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #fff;border-left:8px solid transparent}
.search-engine-list::after{content:'';width:70px;height:18px;position:absolute;top:-17px;left:1px}.search-engine-list li{float:left;width:30%;line-height:30px;font-size:14px;padding:5px 10px 5px 10px;margin:0 10px 10px 0;background:#f9f9f9;color:#999;cursor:pointer}.search-engine-list li img{width:25px;height:25px;border-radius:15px;float:left;margin-right:5px;margin-top:2.5px}#content .content-box{padding-top:51px}.content-box{max-width:1200px;margin:0 auto;padding:0 10px}.item{width:100%}.item>.container-fluid{padding-top:0;margin-top:0}.item>.container-fluid .row{padding:10px 5px}.item-tit>strong{color:#999;font-size:18px;font-weight:400;display:block;margin-bottom:10px;padding-left:5px}.item-tit>strong>i{margin-right:5px;font-size:18px}.card-link{display:block;padding:10px 10px;border-radius:5px;overflow:hidden;margin-bottom:10px;background:#fff;transition:all .2s ease-out;-moz-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-o-transition:all .2s ease-out}.card-link:hover{transform:translateY(-5px);-ms-transform:translateY(-5px);-moz-transform:translateY(-5px);-webkit-transform:translateY(-5px);-o-transform:translateY(-5px);box-shadow:4px 4px 10px rgba(204,204,204,0.5);-moz-box-shadow:4px 4px 10px rgba(204,204,204,0.5)}.card-tit{height:20px;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:normal}.card-tit img{width:40px;height:40px;border-radius:50%;margin-right:5px}.card-desc{color:gray;font-size:12px;padding-top:10px;height:45px;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.content-box .list-box{background:#FFF;padding:20px 10px 0 10px;margin:0}#get-top{width:40px;height:40px;background:#03b8cf;color:#FFF;position:fixed;right:15px;bottom:55px;line-height:30px;text-align:center;font-size:30px;cursor:pointer;display:none;z-index:100}#get-top i{margin:0;font-size:20px}.footer{padding:15px 20px 10px 20px;border-top:1px solid #d0d0d0;background-color:#e8e8e8;text-align:center;font-size:14px;color:#5d5d5d}@media(min-width:768px){.col,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{padding:0 10px}#content .main{padding-top:51px}.sousuo{padding:10px 0 50px 0;margin-top:0}.sousuo-form{width:100%;margin:0 auto}#input{outline:0;padding:0 10px;height:46px;line-height:46px;border:1px solid #ccc;border-left:none;display:block;padding-left:90px}.link-box{width:12.5%;float:left}.item-tit>strong{padding:5px 0 0 10px;margin-bottom:10px}.get-home{margin:0;margin-top:20px}.footer{margin-top:20px}}@media(min-width:992px){header{height:60px;border-bottom:1px solid #e8e8e8}header .main{padding:0 22px}header .logo{float:left;font-size:22px;margin:0;font-weight:400;border:0}header .logo a{display:block;line-height:50px;color:#484848;font-weight:400}header .logo img{width:30px;vertical-align:-10px}header .nav{float:left;margin-left:25px;padding-top:0;height:100%;display:block;overflow:hidden;position:static;width:auto;box-shadow:none}header .nav li{float:left;font-size:16px}header .nav a{display:block;line-height:59px;color:#959595;padding:0 18px;border-bottom:1px solid #e8e8e8}header .nav a:hover{border-color:#459df5;color:#459df5}.left-bar{height:100%;background:#FFF;top:60px;left:0;z-index:1}.left-bar .header{padding:11px 0;border-bottom:0;margin:0 25px;padding-top:15px}.left-bar .header h2{color:#28b779;font-size:16px;font-weight:bold;line-height:inherit;border-left:3px solid #28b779;padding-left:10px}.left-bar .menu{height:600px;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2}.left-bar .tree-menu{border-bottom:1px solid #e8e8e8}.left-bar .tree li.open>ul{height:281px;background:#f5f5f5}.tree-menu li li a{color:#797979;font-size:14px}.search{width:650px}.search-engine{width:650px}.search-engine-list li{width:112px;margin:0 15px 15px 0}#content .main{margin-left:200px;padding-top:70px}.content-box{padding:0 10px;padding-top:61px}.nav-item .container-fluid{padding:20px 20px 10px 20px}.item>.container-fluid .row{padding:0}.card-box .col-md-3{padding:0 7.5px}.card-link{margin-bottom:15px}.main .list-box .menu-list{margin:0 10px 20px 10px}.nav-tabs>li>a{padding:4px 15px}.footer{margin-top:30px}}@media(min-width:1200px){header .nav a{padding:0 25px}.content-box{padding:0 20px}.sousuo-form{width:60%}.item>.container-fluid{padding:0;padding-top:91px;margin-top:-65px}}@media(min-width:1700px){.content-box{max-width:1400px}.col-md-3{width:20%}}
</style>
</head>
<body id="nav_body">
<!--[if lt IE 10]>
<div class="alert alert-danger">
    您正在使用
    <strong>过时的</strong> 浏览器. 请更换一个更好的浏览器来提升用户体验.
</div>
<![endif]--><!--头部导航条-->
<header>
<div class="main">
    <h1 class="logo">
    <a href="goodweb.html">
    <img src="/media/{{role_nav.siteIcon}}">
    <span>{{role_nav.sitename}}</span>
    </a>
    </h1>
    <!--顶部导航条-->
    <nav class="nav">
    <ul>
        {% for nav in role_nav.nav_bar_set.all %}
            {% if nav.url == '' %}
                <li><a href="/nav/{{role_nav.id}}/{{nav.id}}/" target="_self">{{nav.title}}</a></li>
            {% else %}
                <li><a href="{{nav.url}}" target="_self">{{nav.title}}</a></li>
            {% endif %}
		{% endfor %}
    </ul>
    </nav>
    <!--便携设备右上角菜单-->
    <button class="nav-btn visible-xs visible-sm"><span class="icon-line top"></span><span class="icon-line middle"></span><span class="icon-line bottom"></span>
    </button>
</div>
</header>
<div id="content">
    <!--左侧目录，导航跳转-->
    <div class="left-bar">
        <div class="header">
            <h2>{{left_bar_name}}</h2>
        </div>
        <div class="menu" id="menu">
            <ul class="scrollcontent" id="left_bar">
                <!--左侧目录，按照需要修改和添加，参考已有的修改名称和href-->
                <li><a href="#row-1">搜索</a></li>
                {% for nav in left_bars %}
                 <li><a href="#row-{{forloop.counter|add:1}}">{{nav.title}}</a></li>
				{% endfor %}
            </ul>
        </div>
    </div>
    <!--内容-->
    <div class="main">
        <div class="container content-box">
            <!--搜索栏-->
            
            
            <section class="item card-box" id="row-1">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="item-tit">
                                <strong></strong>
                            </div>
                            <!--获取内容列表-->
                            <section class="soso"  >
                            <div class="search">
                                <div class="search-box">
                                    <button class="search-engine-name" id="search-engine-name">百度</button>
                                    <input type="text" id="txt" class="search-input" placeholder="选择引擎，输入关键字，回车/Enter搜索"/>
                                    <button class="search-btn" id="search-btn">搜索</button>
                                </div>
                                <!-- 搜索引擎 -->
                                <div class="search-engine">
                                    <div class="search-engine-head">
                                        <blockquote>
                                          <p><strong class="search-engine-tit">选择您的默认搜索引擎：</strong>
                                          </p>
                                        </blockquote>
                                    </div>
                                    <ul class="search-engine-list">
                                    </ul>
                                </div>
                            </div>
                            </section>
                            

                        </div>
                    </div>
                 </section>
            <!--导航分类范例1，请根据自己的需求进行修改-->
            {% for left_bar in left_bars %}
                 <section class="item card-box" id="row-{{forloop.counter|add:1}}">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="item-tit">
                                <strong>{{left_bar.title}}</strong>
                            </div>
                            <!--获取内容列表-->

                            <div class="clearfix two-list-box">
	                            {% load MyFilter %}
                                {% for link in left_bar.links_set.all|order_by:'sort' %}
                                    <div class="col-md-3 col-sm-4 col-xs-6">
                                        <a href="{{link.url}}" class="card-link" target="_blank">
                                        <div class="card-tit">{{link.title}}</div>
                                        <div class="card-desc">{{link.des}}</div>
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>

                        </div>
                    </div>
                 </section>

			{% endfor %}
            
            
            <!--页脚-->
<!--            <footer class="footer">
            
            </footer>-->
        </div>
        <!--内容区域-->
    </div>
    <div id="get-top" title="回到顶部">
        <i class="icon icon-arrow-up"></i>
    </div>

    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
window.onscroll = function(){
//回到顶部
var sllTop = document.documentElement.scrollTop||document.body.scrollTop;
if(sllTop>240){
  $('#get-top').css('display','block')
}else{
  $('#get-top').css('display','none')
}
}
$('#get-top').click(function(){
  $('body,html').animate({
    scrollTop: 0
  }, 800);//点击回到顶部按钮，数字越小越快
})
//判断用户使用的设备
var deviceVal  = browserRedirect();
function browserRedirect() {
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  var bIsMidp = sUserAgent.match(/midp/i) == "midp";
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  var bIsAndroid = sUserAgent.match(/android/i) == "android";
  var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
  if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
    return 'phone';
  } else {
    return 'pc';
  }
}
  $('.nav-btn').on('click', function () {
    $('.nav').toggleClass('showNav');
    $(this).toggleClass('animated2');
  });

// 默认搜索引擎的内容，如果界面修改了需要同步修改
var thisSearch = 'https://www.baidu.com/s?wd=';

$('#txt').keydown(function(ev){
    // 回车键的处理
    if(ev.keyCode==13){
        window.open(thisSearch + $('#txt').val())
        // $('#txt').val('');
        $('#box ul').html('')
    }
})
$(function(){
  // 搜索引擎列表，样式一行五个内容，自动换行
  var search = {
    data: [ 
	{% for solink in solinks %}
	 {
      name: '{{solink.title}}',
      url: '{{solink.url}}'
     }, 
	 {% endfor %}
	 ]
  }
  for(var i = 0; i < search.data.length; i++){
    var addList = '<li>' + search.data[i].name + '</li>'
    $('.search-engine-list').append(addList);
  }
  $('.search-engine-name, .search-engine').hover(function() {
    $('.search-engine').css('display', 'block')
  }, function() {
    $('.search-engine').css('display', 'none')
  });
  $('.search-engine-list li').click(function() {
    var _index = $(this).index();
    var searchNameBtn = document.getElementById("search-engine-name");
    searchNameBtn.innerHTML = search.data[_index].name;
    thisSearch = search.data[_index].url;
    $('.search-engine').css('display', 'none')
  })
})
$("#search-btn").click(function(){
  var textValue = $('#txt').val();
  if(textValue != ''){
    window.open(thisSearch + textValue)
  }
});
</script>
</div>
</body>
</html>